<template>
	<view class="myOrder">
		<view class="nav">
			<view class="nav_item" @click="selNavFun(index)" v-for="(item,index) in navList" :key="index">
				<view :class="index == selNav ? 'nav_name hover' : 'nav_name'">
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
		<view class="tabbar">
			<view :class="index == selStatus ?'check':''" v-for="(item,index) in statusList" :key="index" @click="selStatusFun(index)">
				{{ item.name }} 
			</view>
		</view>
		<view class="main">
			<view class="content" v-for="(item,index) in pageResult.list" :key="index" @click="jump('trade_view', item.id)">
				<view class="title" >
					<view>申请时间：{{item.createTime}}</view>
					<view>{{item.statusName}}</view>
				</view>
				<view class="list" >
					<view>需求价格<br>￥{{item.trade_price}}</view>
					<view>需求克数<br>{{item.trade_num}}g</view>
					<view>确定克数<br>{{item.confirm_num}}g</view>
					<view>剩余克数<br>{{item.surplus_num}}g</view>
				</view>
			</view>
			<view v-if="pageResult.list.length == 0" class="nocontent">
				<image src="https://hdsq.aoorange.cn/attachment/xcx/icon/noItem.png" ></image>
				<!-- <text>暂无记录～</text> -->
			</view>
		</view>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
				navList: [
					{'name' : '买入',  'val': "1"},
					{'name' : '卖出',  'val': "2"}
				],
				selNav: 0,
				statusList: [
					{'name' : '全部',  'val': "99"},
					{'name' : '进行中',  'val': "1"},
					{'name' : '确定中',  'val': "2"},
					{'name' : '已完成',  'val': "9"},
					{'name' : '已取消',  'val': "0"}
				],
				selStatus: 0,
				pageParam: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					type: 1,
					status: 99,
					page: 0,
					pageSize: 10
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false
				}
			}
		},
		methods: {
			selNavFun(k) {
				this.selNav = k;
				let item = this.navList[k];
				this.pageParam.type = item.val;
				this.pageParam.page = 0;
				this.pageResult.list = [];
				this.getList();
			},
			selStatusFun(k) {
				this.selStatus = k;
				let item = this.statusList[k];
				this.pageParam.status = item.val;
				this.pageParam.page = 0;
				this.pageResult.list = [];
				this.getList();
			},
			getList() {
				uni.showLoading({
					title: '加载中···',
					mask: true
				});
				var self = this;
				self.pageParam.page++
				serve
					.request({
						url: '/tea/trade/list',
						data: self.pageParam
					})
					.then(res => {
						uni.hideLoading();
						if (res.data && res.data.length > 0) {
							self.pageResult.list=self.pageResult.list.concat(res.data);
						}
						self.pageResult.isEmpty = self.pageResult.list.length == 0;
						self.pageResult.isEnd = res.data.length == 0; 
					});
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onShow() {
			this.getList();
		},
		onPullDownRefresh() {
			this.pageParam.page=0;
			this.pageResult.list=[];
			this.getList();
		},
		//触底加载
		onReachBottom() {
			console.log('触底'); 
			if(this.pageResult.isEnd ||this.pageResult.isEmpty){
				return
			}
			this.getList()
		}
	}
</script>

<style scoped lang="scss">
	.myOrder {
		.nav {
			display: flex;
			width: 100%;
			height: 70rpx;
			background: #FFFFFF;
			z-index: 200;
			align-items: center;
			border-bottom: 1rpx rgba(204, 204, 204, 0.3) solid;
		
			.nav_item {
				width: 50%;
				text-align: center;
				line-height: 60rpx;
				.hover {
					border-bottom: 8rpx rgba(251, 202, 63, 1) solid;
					color: rgba(35, 52, 91, 1) !important;
					font-weight: bold;
				}
		
				.nav_name {
					padding: 0rpx 10rpx;
					display: inline-flex;
					height: 64rpx;
					font-size: 32rpx;
					color: rgba(60, 72, 104, 0.5);
				}
			}
		}
		
		.tabbar {
			width: 100%;
			height: 110rpx;
			box-sizing: border-box;
			position: fixed;
			// top: 0rpx;
			background: #FFFFFF;
			z-index: 100;
			width: 100%;
			display: flex;
			border-bottom: 1rpx rgba(235, 235, 235, 1) solid;

			view {
				color: #999999;
				font-size: 32rpx;
				display: inline-block;
				width: 20%;
				vertical-align: middle;
				text-align: center;
				line-height: 110rpx;
			}

			.check {
				position: relative;
				color: #232323;
			}
			.check::after{
				content: "";
				position: absolute;
				bottom: 0;
				left: 45%;
				width:30rpx;
				height:7rpx;
				background:rgba(255,188,0,1);
				border-radius:3rpx;
			}
		}

		.main {
			padding-top: 110rpx;
			.content{
				padding: 20rpx 20rpx;
				// display: flex;
				font-size: 20rpx;
				color: #666666;
				// justify-content: space-between;
				// align-items: center;
				border-bottom: 10rpx rgba(57, 72, 107, 0.1) solid;
				.title {
					width: 100%;
					height: 80rpx;
					font-size: 32rpx;
					display: flex;
					view:first-child {
						width:75%;
						padding-left: 16rpx;
					}
					view:last-child{
						width:24%;
						color: red;
						text-align: right;
					}
				}
				.list {
					justify-content: space-between;
					display: flex;
					align-items: center;
					width: 100%;
					text-align: center;
					height: 80rpx;
					font-size: 32rpx;
					view{
						width: 25%;
					}
					.btn{
						margin: 0 20%;
						background: #FFBC00;
						bottom: 0rpx;
						color: #fff;
						border-radius: 3%;
						width: 50%;
					}
				}
				.list:first-child{
					// border-top: 1rpx rgba(57, 72, 107, 0.1) solid;
				}
			}
		}
		
		.nocontent{
			width: 100%;
			padding-top: 338rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				width:220rpx;
				height:220rpx;
			}
			text{
				font-size:28rpx;
				color:rgba(204,204,204,1);
			     margin-top: 30rpx;
			}
		}
		
		
	}
</style>
